<template>
    <div class="box">
        <div class="null-page" v-show="yes"></div>
        <el-card class="box-card order-list">
            <div slot="header" class="clearfix"><span>批发管理</span></div>
            <div>
                <nav>
                    <li>批发列表</li>
                    <li>成团状态</li>
                    <li>操作</li>
                </nav>
                <div class="list"  v-loading="loading">
                    <div class="item" v-for="(item ,index) in pintuanList" :key="index">
                        <ul>
							<li>
								<div class="img-wrap">
                                    <div class="tuanzhang" v-for="(ite,idx) in item.buyer_list" :key="ite.id">
                                        <span class="name" v-if="idx == 0">团长</span>
                                        <img class="img" :src="$util.img(ite.member_img ==''?'/upload/default/default_img/head.png':ite.member_img)"  />
                                        <span>{{ite.nickname}}</span>
                                    </div>
                                    
									<div v-for="(it,i) in item.pintuan_num - item.pintuan_count" :key="i">
                                        <img class="img" :src="$util.img('upload/uniapp/pintuan/pintuaninit.png')"  />
                                    </div>
								</div>
							</li>
							<li>
								<div class="manage_herder">
							<span v-if="item.status == 3" class="span-color">该批发组已批发成功</span>
							<span v-if="item.status == 2">还差<span class="span-color">{{item.pintuan_num - item.pintuan_count}}人</span>拼成</span>
							<span v-if="item.status == 2" style="color:#ff547b">批发倒计时:{{item.time_data.day}}天{{item.time_data.hr}}:{{item.time_data.min}}:{{item.time_data.sec}}</span>
						</div>
							</li>
							<li>
								<span class="order-color">{{$timeStampTurnTime(item.enter_time).toString().substring(0,11)}}</span>
							</li>
							<li>
								<div class="manage_btn">
							<span class="one_key_success" v-if="item.status == 2" @click="virtualComplete(item.group_id)">一键成团</span>
							<span v-if="item.status == 3">已成团</span>
						</div>
							</li>
						</ul>   
                    </div>
                </div>
                <div v-if="!loading && total == 0" class="empty-wrap">暂无相关批发信息</div>
            </div>
            
        </el-card>
    </div>
</template>

<script>
import {  pintuanPage} from "@/api/member/pintuan"
import { pin,pintuanimgs,virtualcomplete } from "@/api/pintuan"

export default {
    name: "pintuan_manage",

    data: () => {
        return {
            checkStatus: " ",
            loading: true,
            checkList: [],
            currentPage: 1,
            pageSize: 5,
            total: 0,
            yes: true,
            status: 0,
            pintuan_id: '',
            pintuanList: [],
            timeList: [],
            dialogVisible: false,
        }
    },
    created() {
        this.checkStatus = this.$route.query.status || " "
        this.pintuan_id = this.$route.query.enter_id
        this.getpintuanimgs()
    },

    mounted() {
        this.countdown()
        let self = this
        setTimeout(function () {
            self.yes = false
        }, 300)
    },
    methods: {
        countdown: function() {
            let that = this;
			that.countDownNum ++;
			for(let i in this.pintuanList){
				let item = this.pintuanList[i];
				let time_data = {};
				// 定义结束时间戳
                var x = this.$timeStampTurnTime(item.end_time)
				const end = Date.parse(new Date(x))
					// 定义当前时间戳
				const now = Date.parse(new Date())
					// 做判断当倒计时结束时都为0
				if (now >= end) {
					time_data.day = '00'
					time_data.hr = '00'
					time_data.min = '00'
					time_data.sec = '00'
					item.time_data = time_data;
					continue;
				}
				// 用结束时间减去当前时间获得倒计时时间戳
				const msec = end - now
				let day = parseInt(msec / 1000 / 60 / 60 / 24) //算出天数
				let hr = parseInt(msec / 1000 / 60 / 60 % 24) //算出小时数
				let min = parseInt(msec / 1000 / 60 % 60) //算出分钟数
                let sec = parseInt(msec / 1000 % 60) //算出秒数
				//给数据赋值
				time_data.day = day
				time_data.hr = hr > 9 ? hr : '0' + hr
				time_data.min = min > 9 ? min : '0' + min
				time_data.sec = sec > 9 ? sec : '0' + sec
				item.time_data = time_data;
			}
			// 使用定时器 然后使用递归 让每一次 函数能调用自己达到倒计时效果
            setTimeout(function() {
                that.countdown()
            }, 1000)
        },
        getTime(){
				let that = this;
				let list = this.pintuangroupList;
				for(let i in list){
					let item = list[i];
					let curr_time = Math.floor(new Date().getTime() / 1000);
					let end_time = item.end_time;
					if (curr_time < end_time) {
						let time = (end_time - curr_time);
						let day = parseInt(time / (60 * 60 * 24));
						let hou = parseInt((time % (60 * 60 * 24)) / 3600);
						let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
						let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
						let obj = {
							day: day < 10 ? '0' + day : day,
							hou: hou < 10 ? '0' + hou : hou,
							min: min < 10 ? '0' + min : min,
							sec: sec < 10 ? '0' + sec : sec
						};
						let timeShow = '';
					
						timeShow += obj.day + '天';
				
						timeShow += obj.hou + ':' + obj.min + ':' + obj.sec ;
						item.timeShow = timeShow;
					}
				}
				this.pintuangroupList = list;
				this.num ++;
				that.timeOutObj = setTimeout(function(){
					that.getTime();
				}, 1000);
		},
        handleClick(tab, event) {
            this.currentPage = 1
            this.checkStatus = tab.name
            this.refresh()
        },

        getpintuanimgs() {
            pintuanimgs({
                page: this.currentPage,
                page_size: this.pageSize ,
                pintuan_id: this.pintuan_id,
            })
                .then(res=>{
                    if(res.code==0 && res.data) {
                        for(let i in res.data.list) {
                            res.data.list[i]['time_data'] = {
                                day : '0',
                                hou: '00',
                                min: '00',
                                sec: '00'
                            };
                        }
                        this.pintuanList = res.data.list
                    }
                    this.loading = false
                })
                .catch(err=>{
                    console.log(err)
                    this.loading = false
                })
        },
        handlePageSizeChange(size) {
            this.pageSize = size
            this.refresh()
        },
        handleCurrentPageChange(page) {
            this.currentPage = page
            this.refresh()
        },
        refresh() {
            this.loading = true
            this.getAgentCheckList()
        },
        pintuanDetail(enter_id) {
            this.$router.push(
                { 
                    path: "/member/pingtuan_manage",
                    query: {
                        enter_id : enter_id
                    }
                }
            )
        },
        virtualComplete(group_id) {
            this.$confirm('确定要一键成团吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                virtualcomplete({
                    group_id: group_id
                })
                    .then(res=>{        
                        this.$message({
                            type: 'success',
                            message: '批发成功!'
                        });
                        window.location.reload();
                    })
                    // .catch(err=>{
                    //     this.$message({
                    //         type: 'info',
                    //         message: 'err'
                    //     }); 
                    // })
            }).catch(() => {                
                this.$message({
                    type: 'info',
                    message: '批发。。。'
                });          
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    position: relative;
}

.null-page {
    width: 100%;
    height: 730px;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

.one_key_success {
    background-color: #ff547b;
    color: #ffffff;
    padding:8px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.order-list {
    nav {
        overflow: hidden;
        padding: 10px 0;
        background: #fff;
        margin-bottom: 10px;
        border-bottom: 1px solid #eeeeee;
        li {
            float: left;
            &:nth-child(1) {
                width: 40%;
            }
            &:nth-child(2) {
                width: 40%;
            }
            &:nth-child(3) {
                width: 20%;
            }
            // &:nth-child(4) {
            //     width: 10%;
            // }
        }
    }
    .list {
        .item {
            margin-bottom: 20px;
            border: 1px solid #eeeeee;
            border-top: 0;
            .head {
                padding: 8px 10px;
                background: #f7f7f7;
                font-size: 12px;

                .create-time {
                    margin-right: 10px;
                }

                border-bottom: 1px solid #eeeeee;
                a {
                    margin: 0 10px 0 20px;
                }

                .order-type {
                    margin-left: 30px;
                }
            }
        }
        ul {
            background-color: #fff;
            padding: 10px;
            overflow: hidden;
            li {
                float: left;
                line-height: 60px;
                &:nth-child(1) {
                    width: 40%;
                    line-height: inherit;
                    .img-wrap {
                        display: flex;
                        height: 90px;
                        float: left;
                        margin-right: 10px;
                        cursor: pointer;

                        .img {
                                width: 60px;
                                height: 60px;
                                border-radius: 30px;
                                margin: 0 5px;
                            }

                        .tuanzhang {
                            display: flex;
                            flex-direction: column;
                            position: relative;
                            align-items: center;
                            .img {
                                width: 60px;
                                height: 60px;
                                border-radius: 30px;
                                margin: 0 5px;
                            }
                            .name {
                                position: absolute;
                                bottom:30px;
                                background-color: #FF3A39;
                                height: 18px;
                                line-height: 18px;
                                border-radius: 9px;
                                padding:0 3px;
                                color:#fff;
                            }
                        }
                    }
                    .info-wrap {
                        margin-left: 70px;
                        h5 {
                            font-weight: normal;
                            font-size: $ns-font-size-base;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                            margin-right: 10px;
                            display: inline-block;
                            cursor: pointer;
                            &:hover {
                                color: $base-color;
                            }
                        }
                        span {
                            font-size: $ns-font-size-sm;
                            color: #9a9a9a;
                        }
                    }
                }
                &:nth-child(2) {
                    width: 40%;
                }
                &:nth-child(3) {
                    width: 20%;
                }
                // &:nth-child(4) {
                //     width: 10%;
                // }
                // &:nth-child(5) {
                //     width: 15%;
                //     line-height: 30px;
                //     a {
                //         display: block;
                //     }
                // }
                // &:nth-child(6) {
                //     width: 10%;
                //     line-height: initial;
                //     button {
                //         margin-left: 0;
                //         margin-bottom: 10px;
                //         &:last-child {
                //             margin-bottom: 0;
                //         }
                //     }
                // }
            }
        }
    }
    .pager {
        margin-top: 20px;
    }
    .empty-wrap {
        span-align: center;
        padding: 10px;
    }
}
</style>
